<template>
  <view class="container1">
    <u-navbar
      backIconColor="#fff"
      title-size="36"
      :is-back="true"
      :background="background"
      :border-bottom="false"
      title-color="#fff"
    >
    </u-navbar>
    <view class="title">
      <u-image :src="`${getImageUrl('title.png')}`" width="636rpx" height="138rpx"></u-image>
    </view>
    <view class="card">
      <view class="item dis-flex" v-for="(item, index) in qList" :key="index">
        <u-image mode="aspectFill" :src="item.iconUrl" width="50rpx" height="50rpx"></u-image>
        <view class="ucon">
          <view class="name">{{ item.name }}</view>
          <u-parse class="content" :html="item.summary"></u-parse>
        </view>
      </view>
    </view>
    <view class="bt" @click="routeTo('/gather/check-type')">我要申请加入</view>
    <view class="footer-fill"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: 'transparent'
      },
      qList: [
        {
          icon: '/static/alliance/balance.png',
          title: '收入客观',
          content:
            '文本说明内容，文本说明内容，文本说明内容，文本说明内容。文本说明内容，文本说明内容，文本说明内容，文本说明内容，文本说明内容。文本说明内容，文本说明内容，容，文本说明内容;'
        },
        {
          icon: '/static/alliance/addr.png',
          title: '地点灵活',
          content:
            '文本说明内容，文本说明内容，文本说明内容，文本说明内容。文本说明内容，文本说明内容，文本说明内容，文本说明内容，文本说明内容。文本说明内容，文本说明内容，容，文本说明内容;'
        },
        {
          icon: '/static/alliance/time.png',
          title: '时间自由',
          content:
            '文本说明内容，文本说明内容，文本说明内容，文本说明内容。文本说明内容，文本说明内容，文本说明内容，文本说明内容，文本说明内容。文本说明内容，文本说明内容，容，文本说明内容;'
        }
      ]
    }
  },
  onLoad() {
    this.$u
      .get('/app-api/cms/benefit/list', {
        category: 'jvshangquan_apply_rule'
      })
      .then((res) => {
        this.qList = res.data
        // console.log(res)
      })
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #10a28f !important;
}

.container1 {
  background-color: #10a28f;
  width: 100%;
  height: 100vh;
}

.title {
  width: 636rpx;
  margin: auto;
  margin-top: 30rpx;
}

.card {
  width: 650rpx;
  // height: 960rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(204, 122, 0, 0.15);
  border-radius: 30rpx;
  margin: auto;
  margin-top: 60rpx;
  padding: 47rpx 33rpx;

  .item:last-child {
    margin-bottom: 0;
  }

  .item {
    align-items: flex-start;
    margin-bottom: 40rpx;

    .ucon {
      margin-left: 15rpx;

      .name {
        font-size: 34rpx;
        color: #333333;
        margin-bottom: 20rpx;
      }

      .content {
        font-size: 26rpx;
        color: #666666;
        line-height: 46rpx;
      }
    }
  }
}

.bt {
  width: 650rpx;
  height: 90rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(159, 96, 0, 0.15);
  border-radius: 45rpx;
  margin: auto;
  margin-top: 103rpx;
  font-size: 30rpx;
  color: #10a28f;
  text-align: center;
  line-height: 90rpx;
}
</style>
